<template>
  <div class="home">
	  <!-- 左侧简历栏 -->
	  <div class="left">
		  <div class="head">
			  <div class="ico"></div>
			  <h4 class="title">简历</h4>
		  </div>
		  <div class="create" @click="createResume"><span style="margin:0 8px;font-weight: 700;">+</span>创建我的简历</div>
		  <div class="rbs_contain">
			  <resume-button v-for='(val,ind) in resumes' :id='ind'></resume-button>
		  </div>
	  </div>
	  <!-- 右侧信息栏 -->
	  <div class="right">
		  <div class="infor">
			  <div class="head">
				  <div class="ico"></div>
				  <h4 class="title">个人信息</h4>
			  </div>
			  <ul class="person">
				  <li><div class="who">{{personinfor[0]}}</div></li>
				  <li><span>性别：</span>{{personinfor[1]}}</li>
				  <li><span>年龄：</span>{{personinfor[2]}}</li>
				  <li><span>学历：</span>{{personinfor[3]}}</li>
				  <li><span>毕业院校：</span>{{personinfor[4]}}</li>
				  <li><span>所学专业：</span>{{personinfor[5]}}</li>
				  <li><span>毕业时间：</span>{{personinfor[6]}}</li>
				  <li><span>电话：</span>{{personinfor[7]}}</li>
				  <li><span>邮箱：</span>{{personinfor[8]}}</li>
			  </ul>
			  <img class="myhead" v-if="personinfor[1]==''?false:true" :src="headicon[personinfor[1]]" alt="">
			  <span class="switch" @click="openEdit">编辑</span>
		  </div>
	  </div>
	 <person-create v-show='editPage' class="person_edit"></person-create>
  </div>
</template>

<script>
// @ is an alias to /src
import Persons from '../components/person_infor.vue'
import Rb from '../components/resumeBut.vue'
import {mapState,mapMutations} from 'vuex'
export default {
  name: 'Home',
  components: {
	  "person-create": Persons,
	  'resume-button': Rb
  },
  computed:{
	  ...mapState(['editPage','personinfor','resumes'])
  },
  data(){
	  return{
		  headicon:{'男':'images/men.png','女':'images/women.png'},
	  }
  },
  methods:{
	...mapMutations(['openEdit','createResume','removeResume']),
	
  }
}
</script>

<style scoped lang="less">
.home{
	box-sizing: border-box;
	user-select: none;
	width: 1200px;
	height: 750px;
	display: flex;
	margin: auto;
	padding: 25px;
	box-shadow: 0 0 15px #ecc;
	background-color: #fff;
	// 左侧
	.left{
		width: 750px;
		height: 680px;
		// border: 1px solid #fcc;
		// 头部
		.head{
			text-align: left;
			padding: 10px 0;
			margin: 10px 20px;
			display: flex;
			border-bottom: 1px dashed #f7f7f7;
			background-color: #f7f7f7;
			.ico{
				width: 6px;
				height: 30px;
				border-radius: 3px;
				margin-left: 10px;
				background-color: #f23;
			}
			.title{
				line-height: 30px;
				margin-left: 10px;
			}
		}
		.create{
			float: right;
			border: 1px dashed #ccc;
			height: 30px;
			line-height: 29px;
			color: #368aff;
			padding-right: 8px;
			margin-right: 20px;
		}
		.create:hover{
			border-color: #368aff;
		}
		.rbs_contain{
			margin-top: 70px;
		}
	}
	// 右侧
	.right{
		width: 300px;
		height: 700px;
		margin: 50px 0 0 40px;
		padding: 20px;
		text-align: left;
		.infor{
			position: relative;
			height: 360px;
			border: 1px solid #ccc;
			.myhead{
				width: 80px;
				height: 80px;
				border-radius: 50%;
				position: absolute;
				display: block;
				right: 30px;
				top: 50px;
			}
			.switch{
				position: absolute;
				right: 20px;
				top: 320px;
				color: #378afe;
			}
			.head{
				display: flex;
				background-color: #f7f7f7;
				.ico{
					width: 6px;
					height: 24px;
					border-radius: 3px;
					margin:3px 0 0 5px;
					background-color: #f23;
				}
				.title{
					line-height: 30px;
					margin-left: 10px;
				}
			}
			.person{
				padding: 10px 30px 0 30px;
				font-size: 14px;
				color: #6e7580;
				.who{
					min-width: 20px;
					height: 16px;
					color: #334;
					font-weight: 600;
					font-size: 16px;
					padding-left: 40px;
				}
				li{
					margin-bottom: 10px;
					span{
						display: inline-block;
					}
				}
			}
		}
	}
	.person_edit{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
}
</style>